<template>
  <Page class="demo-home demo-page">
    <section class="menu-wrap">
      <p
        class="menu-line"
        v-for="(menu, index) of menuList"
        :key="menu.path"
        @click="go(menu.path)"
      >
        {{ index + 1 }}：{{ menu.desc }}
      </p>
    </section>
    <div class="theme-test">
      <span class="title-test"> 点击切换主题 </span>
      <SvgIcon
        :icon-class="globalTheme === 'dark' ? 'darktheme' : 'lighttheme'"
        @click="changeTheme(globalTheme === 'dark' ? 'light' : 'dark')"
      ></SvgIcon>
    </div>
  </Page>
</template>

<script>
export default {
  name: "demoHome",
  data() {
    return {
      menuList: [
        {
          path: "demoForm",
          desc: "form表单",
        },
        {
          path: "demoUi",
          desc: "UI相关",
        },
        {
          path: "demoLazyload",
          desc: "图片懒加载",
        },
        {
          path: "demoThrottle",
          desc: "事件防抖与节流",
        },
        {
          path: "demoStore",
          desc: "刷新页面不丢失的vuex",
        },
        {
          path: "demoEventBus",
          desc: "eventBus兄弟组件之间传值",
        },
        {
          path: "demoFundebug",
          desc: "fundebug错误监控",
        },
        {
          path: "demoHttp",
          desc: "http请求",
        },
        {
          path: "demoApp",
          desc: "app与微信",
        },
        {
          path: "demoJssdk",
          desc: "jssdk",
        },
        {
          path: "demoIscroll",
          desc: "iscroll模拟滚动+解决滚动穿透",
        },
        {
          path: "demoEcharts",
          desc: "可视化数据echarts使用",
        },
        {
          path: "demoCA",
          desc: "CA签字",
        },
        {
          path: "demoScrollTable",
          desc: "固定列和表头的table",
        },
        {
          path: "demoGuanLian",
          desc: "关联关系图谱",
        },
        {
          path: "demoGuQuan",
          desc: "股权穿透",
        },
        {
          path: "checkRelation",
          desc: "查关系",
        },
      ],
      globalTheme: "light",
    };
  },
  computed: {},
  created() {},
  methods: {
    changeTheme(item) {
      this.globalTheme = item;
      window.document.documentElement.setAttribute("data-theme", item);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/demo/index.scss";
.demo-home {
  display: none;
  .menu-wrap {
    .menu-line {
      height: 40px;
      line-height: 40px;
      font-size: 13px;
      color: #4b4b4b;
      &:not(:last-of-type) {
        border-bottom: 1px solid #cccccc;
      }
    }
  }
}
.title-test {
  @include font_color("fontColor15");
}
.theme-test {
  @include background_color("bgColor5");
}
</style>
